<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>加入购物车</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-ep+dxp/oz2RKF89ALMPGc7Z89QFa32C8Uv1A3TcEK8sMzXVysblLA3+eJWTzPJzT" crossorigin="anonymous"></script>

</head>
<body>
<div th:replace="fragments/header:: navbar"></div>
<div class="container pt-5">
    <div class="m-a-1">
        <h3 class="text-center">欢迎购书，你的订单信息汇总</h3>
        <table class="table table-bordered table-striped p-a-1">
            <thead>
                <tr>
                    <th>图书封面</th>
                    <th>图书名称</th>
                    <th>购买数量</th>
                    <th>图书价格</th>
                    <th>用户操作</th>
                </tr>
            </thead>
            <tbody>
                <tr th:if="${#lists.isEmpty(order.books)}">
                    <td colspan="5"class="text-xs-center">你的订单为空 </td>
                </tr>

                <tr th:each="orderBook:${order.books}">
                    <td>
                        <img width="90" th:src="@{|/bookImage?bookId=${orderBook.book.bookId}|}"/>
                    </td>
                    <td>[[${orderBook.book.bookName}]]</td>
                    <td>[[${orderBook.quantity}]] </td>
                    <td class="text-xs-end">
                        [[${orderBook.book.bookPrice}]]元</td>
                    <td class="text-xs-center">
                        <a class="btn btn-sm btn-danger"
                           th:href="@{'/order/removeBook/{bookId}'(bookId=${orderBook.book.bookId})}">删除
                        </a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="4" class="text-end">合计：</td>
                <td th:unless="${#lists.isEmpty(order.books)}" class=
                        "text-xs-end">[[${order.orderPrice}]]元</td>
                <td th:if="${#lists.isEmpty(order.books)}"class=
                        "text-ns-end">[[${order.orderPrice}]] 0.0</td>
            </tr>
        </tfoot>
        </table>
    </div>
    <div class = "col-12 text-end">
        <a class="btn btn-primary"th:href="@{/home}">继续购物</a>
        <a class="btn btn-success" th:href="@{/order/createOrder}">提交订单</a>
    </div></div>
</body>
</html>